<template>
	<div class="Rule">
		<el-card shadow="never">
		    <el-row>
				<el-col :span="12">
					 
					<span class="label">
						包含字段： 
					</span>	
					  <el-input placeholder="请输入检测目标名称" v-model="searchContains" class="search">
					  
					    <el-button slot="append" icon="el-icon-search" @click="search()">查询</el-button>
					  </el-input>
				</el-col>

		        <el-col :span="12" >
					<el-button type="primary"  style="margin-left:5px;float:right;" @click="updateDialog()">更新</el-button>
					
					<el-button type="primary"  style="float:right;" @click="addHandler()">新增</el-button>
			   </el-col>
		    </el-row>
			
		</el-card>	
		<br/>
		<el-table
		    :data="ruleList"
		    border
		    style="width: 100%">
		    <el-table-column
		      prop="id"
		      label="规则id"
			   align="center"
		      >
		    </el-table-column>
		    <el-table-column
		      prop="contains"
		      label="包含字段"
			  align="center"
		      >
		    </el-table-column>
		    <el-table-column
			 
		      label="报警等级"
			  align="center"
			  >
			  <template slot-scope="scope">
				  <span >{{getAlarmClass(scope.row)}}</span>
			  
			  </template>
			</el-table-column>
			<el-table-column
				label="操作"
				align="center"
				>
				<template slot-scope="scope">
					<el-button type="text" icon="el-icon-edit"   @click="editHandler(scope.row)" >修改</el-button>
					<el-button type="text" icon="el-icon-delete"  @click="deleteHandler(scope.row)" >删除</el-button>
				</template>
			</el-table-column>
		  </el-table>
		  <center>
		          <el-pagination
		            style="margin-top: 10px;"
		            background
		            :page-size="pageSize"
		            @current-change="handleCurrentChange"
		            layout="total, prev, pager, next, jumper"
		            :current-page="currentPage"
		            :total="total">
		          </el-pagination>
		 </center>
		<el-dialog title="新增规则" :visible.sync="dialogVisibleAdd" width="30%" >
			<center>
			<div style="width: 85%;">
		     <el-form :model="addForm" :rules="rules" ref="addForm" label-width="90px" class="demo-ruleForm">
		       
		       		  <el-form-item label="包含字段" prop="contains">
		       		    <el-input class='select' v-model="addForm.contains" placeholder="请输入包含字段"></el-input>
		       		  </el-form-item>
					  
					  <el-form-item label="报警等级" prop="alarmClass">
						  <el-select class='select' v-model="addForm.alarmClass"  placeholder="请选择报警等级">
						     	<el-option
						     	      v-for="item in alarmClasses"
						     	      :key="item.value"
						     	      :label="item.label"
						     	      :value="item.value">
						     	 </el-option>
						  </el-select>
					  </el-form-item>
				
		     </el-form>
			 </div>
			 </center>
			 <span slot="footer" class="dialog-footer">
			 <el-button type="primary" @click="submitAdd">添加</el-button>
			 <el-button @click="resetForm('addForm')">重置</el-button>
			 </span>
			 
		</el-dialog>
			  
			  <el-dialog title="修改规则" :visible.sync="dialogVisibleModify" width="30%" >
			  	<center>
			  	<div style="width: 85%;">
			       <el-form :model="modifyForm" :rules="rules" ref="modifyForm" label-width="90px" class="demo-ruleForm">
			         
			         		  <el-form-item label="包含字段" prop="contains">
			         		    <el-input class='select' v-model="modifyForm.contains" placeholder="请输入包含字段"></el-input>
			         		  </el-form-item>
			  			  <el-form-item label="报警等级" prop="alarmClass">
							  <el-select class='select' v-model="modifyForm.alarmClass"  placeholder="请选择报警等级">
							     	<el-option
							     	      v-for="item in alarmClasses"
							     	      :key="item.value"
							     	      :label="item.label"
							     	      :value="item.value">
							     	 </el-option>
							  </el-select>
			  			  </el-form-item>
			  		
			       </el-form>
			  	 </div>
			  	 </center>
			  	 <span slot="footer" class="dialog-footer">
			  	 <el-button type="primary" @click="submitModify">修改</el-button>
			  	 <el-button @click="resetForm('modifyForm')">重置</el-button>
			  	 </span>
			  	 
			  </el-dialog>
			  
			  <el-dialog title="更新过滤规则" :visible.sync="dialogVisibleUpdate" width="30%" >
			  	
			  	<div style="width: 85%;">
			       过滤规则映射较为复杂，请确认您已完成规则表中全部新增、修改、删除操作。
			  	 </div>
				 <div style="width: 85%;">
				    切勿频繁点击更新。
				  </div>
			  	 
			  	 <span slot="footer" class="dialog-footer">
			  	 <el-button type="primary" @click="update()">确定</el-button>
			  	 <el-button @click="cancelUpdate()">取消</el-button>
			  	 </span>
			  	 
			  </el-dialog>
		  
	</div>
</template>

<script>
	export default {
		data() {
			return {
				searchContains:'',//搜索值
				containsOld:'',//原搜索值
				dialogVisibleModify: false, //修改弹出框
				dialogVisibleAdd: false,//新增弹出框
				dialogVisibleUpdate: false,//更新弹出框
				total: 0,
				currentPage: 1,
				pageSize:10,
				alarmClasses: [{
				             value:1,
				             label: '一级告警'
				           }, {
				             value:2,
				             label: '二级告警'
				           }],
				modifyForm: {
						 id:'',
						 contains:'',
						 alarmClass:'',
						},
				addForm: {
						 contains:'',
						 alarmClass:'',
						 },
				
				ruleList:[],
				
				
					 rules: {
							 contains : [
								{ required: true, message: '请输入包含字段', trigger: 'blur' },
							   
							  ],
							 alarmClass : [
								{ required: true, message: '请选择报警等级', trigger: 'change' },
							  ]
							}
			}
		},
		created() {
			      // this.axios.defaults.withCredentials = true;
			
					this.axios.post('/dataOp/searchRuleByPage',{
						filterMap:{
						contains:this.searchContains,
						},
						pageNum:this.pageNum,
						pageSize:this.pageSize
					}).then(r=>{
						if(r.data.code=='200'){
						this.ruleList=r.data.data.list;
						this.total=r.data.data.total;
						//console.log(this.ruleList);
						}
						else if(r.data.code=='504'){
							 this.ruleList=[];
							 this.total=0;
							 this.currentPage=1;
						}
					});
		},
		
		mounted() { 

		 }, 
		methods: {
			//打开新增弹窗
		   addHandler(){
			    this.dialogVisibleAdd=true;
		   },
		   handleCurrentChange (val) {
		         this.currentPage = val
		         this.axios.post('/dataOp/searchRuleByPage',{
		         	filterMap:{
		         					contains:this.containsOld,
		         	},
		         	pageNum:this.currentPage,
		         	pageSize:this.pageSize
		         }).then(r=>{
					 if(r.data.code=='200'){
					 this.ruleList=r.data.data.list;
					 this.total=r.data.data.total;
					 //console.log(this.ruleList);
					 }
					 else if(r.data.code=='504'){
					 	 this.ruleList=[];
					 	 this.total=0;
					 	 this.currentPage=1;
					 }
		         	
		         });
		       },
		  updateDialog(){
			  this.dialogVisibleUpdate=true;
		  },
		  cancelUpdate(){
		  			  this.dialogVisibleUpdate=false;
		  },
		   //更新按钮
		   update(){
			   this.dialogVisibleUpdate=false;
			   this.$alert('更新过滤规则成功，更新后的规则将适用于下一次数据过滤', '更新过滤规则', {
			   				   	confirmButtonText: '确定',
			   				   	 callback: action => {
			   				   									          }
			   				   									});
			   	
			   
			   this.axios.post('/dataOp/updateTagRuleAlarm').then(r=>{
				   });
				   
		   },
		   //增删改后重新获取列表
		   getList(){
			   this.currentPage=1;
			    this.searchContains='';
				this.containsOld='';
			   this.axios.post('/dataOp/searchRuleByPage',{
				  
			   	filterMap:{
					contains:this.searchContains,
			   	},
			   	pageNum:this.currentPage,
			   	pageSize:this.pageSize
			   }).then(r=>{
				   if(r.data.code=='200'){
				   this.ruleList=r.data.data.list;
				   this.total=r.data.data.total;
				   this.searchContains='';
				   //console.log(this.ruleList);
				   }
				   else if(r.data.code=='504'){
				   	 this.ruleList=[];
				   	 this.total=0;
				   	 this.currentPage=1;
				   }
			   	//console.log(this.ruleList);
			   });
		   },
		   //搜索按钮对应
		   search(){
			   this.containsOld=this.searchContains;
			   this.currentPage=1;
			   this.axios.post('/dataOp/searchRuleByPage',{
				   filterMap:{
					   contains:this.searchContains,
				   },
			   	pageNum:this.currentPage,
			   	pageSize:this.pageSize
			   }).then(r=>{
				if(r.data.code=='200'){  
			    this.ruleList=r.data.data.list;
			   	this.total=r.data.data.total;
			   	//console.log(this.ruleList);
				}
				else if(r.data.code=='504'){
					 this.ruleList=[];
					 this.total=0;
					 this.currentPage=1;
				}
			   });
			  
		   },
		   //处理表格中告警等级，转换成文字
		   getAlarmClass(item){
			   if(item.alarm_class==1){
					return('一级告警');
					}
				else if(item.alarm_class==2)
					return('二级告警');
			   
		   },
		   //重置表单
		   resetForm(formName) {
		        this.$refs[formName].resetFields();
		      }	,
		   //打开修改表单
		   editHandler(item){
			  this.modifyForm.id=item.id;
			  this.modifyForm.contains=item.contains;
			  this.modifyForm.alarmClass=item.alarm_class;
			  this.dialogVisibleModify=true;
		   },
		   //删除规则
		   deleteHandler(item){
			   this.$confirm('此操作将永久删除该规则，是否继续?', '提示', {
			             confirmButtonText: '确定',
			             cancelButtonText: '取消',
			             type: 'warning'
			           }).then(() => {
						
						this.axios.post('/dataOp/deleteRule',{
								  	id:item.id,
						}).then(r=>{
						if(r.data.code=='200'){
						
						this.searchContains="";
						this.getList();
						this.$alert('删除规则成功', '删除规则', {
							confirmButtonText: '确定',
							 callback: action => {
															          }
															});
						}
						else if(r.data.code=='504'){
							this.$alert(r.data.message, '删除失败', {
								confirmButtonText: '确定',
								 callback: action => {
																          }
																});
						}
						})
			           }).catch(() => {   
			           });

		   },
		   //提交新增
		   submitAdd(){
					this.axios.post('/dataOp/insertRule',{
							  	contains:this.addForm.contains,
								alarm_class:this.addForm.alarmClass
		
					}).then(r=>{
					if(r.data.code=='200'){
					
					this.searchContains="";
					this.getList()
					this.$alert('新增规则成功', '新增规则', {
						confirmButtonText: '确定',
						 callback: action => {
														          }
														});
					this.dialogVisibleAdd=false;
					this.addForm.contains='';
					this.addForm.alarmClass='';
					}
					else if(r.data.code=='504'){
						this.$alert(r.data.message, '新增失败', {
							confirmButtonText: '确定',
							 callback: action => {
															          }
															});
					}
					})
		   },
		   //提交修改
		   submitModify(){
			   this.axios.post('/dataOp/updateRule',{
						id:this.modifyForm.id,
			   		  	contains:this.modifyForm.contains,
			   			alarm_class:this.modifyForm.alarmClass
			   		
			   }).then(r=>{
			   if(r.data.code=='200'){
			   
			   this.searchContains="";
			   this.getList();
			   this.$alert('修改规则成功', '修改规则', {
			   	confirmButtonText: '确定',
			   	 callback: action => {
			   									          }
			   									});
			   this.dialogVisibleModify=false;
			   this.modifyForm.id='';
			   this.modifyForm.contains='';
			   this.modifyForm.alarmClass='';
			   }
			   else if(r.data.code=='504'){
			   	this.$alert(r.data.message, '修改失败', {
			   		confirmButtonText: '确定',
			   		 callback: action => {
			   										          }
			   										});
			   }
			   })
		   },
			
	
		}
	}
</script>

<style lang="less" scoped>
	.Rule{
	.select{
		width:100%;
		height:80%;
	}
	
	.search{
		width:65%;
		height:80%;
	}
	.label{
		font-size: 14px;
	}
	
}
</style>
